<!--
 * @Descripttion: 报表设计--大屏报表列表
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <div class="main-layout">
    <el-form ref="form" :model="params" :rules="rules" label-width="120px">
      <!-- 搜索 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
          <el-form-item label="名称">
            <el-input
              v-model="params.reportName"
              size="mini"
              clearable
              placeholder="名称"
              class="filter-item"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
          <el-form-item label="报表编码">
            <el-input
              v-model="params.reportCode"
              size="mini"
              clearable
              placeholder="报表编码"
              class="filter-item"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
          <el-button
            type="primary"
            size="mini"
            @click="search('form')"
          >查询</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="reset('form')"
          >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col v-for="item in list" :key="item.id" :span="6">
        <div class="bg">
          <img
            :src="
              item.reportImage == null || item.reportImage == ''
                ? require('@/assets/images/charts.jpg')
                : item.reportImage
            "
            class="bg-img"
            alt=""
          >
          <div class="content">
            <header>{{ item.reportName }}</header>
            <footer>
              {{ item.updateTime }}
              <div class="operation">
                <el-button
                  v-permission="'bigScreenManage:share'"
                  icon="el-icon-share"
                  class="view"
                  type="text"
                  @click="share(item)"
                />
                <el-button
                  v-permission="'bigScreenManage:view'"
                  icon="el-icon-view"
                  class="view"
                  type="text"
                  @click="viewDesign(item)"
                />
                <el-button
                  v-permission="'bigScreenManage:design'"
                  icon="el-icon-edit"
                  class="edit"
                  type="text"
                  @click="openDesign(item)"
                />
              </div>
            </footer>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="block">
      <el-pagination
        :total="totalCount"
        :page-sizes="[8, 20, 50, 100]"
        :page-size="params.pageSize"
        :current-page="params.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {

      list: [{ id: 215, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:14:13', updateBy: 'guest', updateByView: null, updateTime: '2022-06-20 15:58:06', version: 724, reportName: '销售额大屏展示', reportCode: 'mb19', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 720, accessKey: 'e8f35cabb615e596c0a460684f7a5014' },
        { id: 214, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:12:40', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 10:45:34', version: 213, reportName: '酒机运行状态', reportCode: 'mb11', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 211, accessKey: '156270e09151313f02b16b892db076f2' },
        { id: 213, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:11:48', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 10:49:29', version: 214, reportName: '大数据智慧能力-网络能力', reportCode: 'mb10', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 212, accessKey: 'e1624aa7bc194eb58eb83acdb1022a23' },
        { id: 212, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:10:56', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 10:55:01', version: 145, reportName: '服装品牌销售模板', reportCode: 'mb9', etCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 143, accessKey: 'b4a0b870293795977287f943501df097' },
        { id: 211, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:09:26', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 10:57:11', version: 176, reportName: '全国图书零售检测', reportCode: 'mb8', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 174, accessKey: 'd158b78bc4e5f48eb16bdecbb4a55adc' },
        { id: 210, createBy: 'admin', createByView: null, createTime: '2022-01-21 09:03:32', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 19:26:58', version: 153, reportName: '舆情分析', reportCode: 'mb7', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 151, accessKey: 'a3020a8e220ec0c3602690ee5a484a9b' },
        { id: 207, createBy: 'admin', createByView: null, createTime: '2021-12-23 15:24:00', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 11:00:59', version: 140, reportName: '智慧社区内网对比平台', reportCode: 'mb6', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: '', enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 136, accessKey: 'a7d8c8e61fdc964a056448c57b50220a' },
        { id: 206, createBy: 'admin', createByView: null, createTime: '2021-12-23 15:20:55', updateBy: 'guest', updateByView: null, updateTime: '2022-06-19 11:04:51', version: 185, reportName: '设备环境检测平台', reportCode: 'mb5', setCodes: null, reportGroup: 'default', reportDesc: null, setParam: null, jsonStr: null, reportType: 'report_screen', total: 0, reportImage: null, enableFlag: 1, deleteFlag: 0, reportAuthor: '心瘾丶 @yi_shan_liu', downloadCount: 183, accessKey: '1c959d37e59315f05f719d46974ba4bc' }
      ],
      rules: {},
      totalCount: 10,
      totalPage: 2,
      params: {
        reportCode: '',
        reportName: '',
        reportType: 'report_screen',
        pageNumber: 1,
        pageSize: 8,
        order: 'DESC',
        sort: 'update_time'
      },
      // 分享
      visibleForShareDialog: false,
      reportCodeForShareDialog: '',
      reportNameForShareDialog: ''
    }
  },
  mounted() {},
  created() {
    this.queryByPage()
  },
  methods: {
    // 查询
    search() {
      this.params.pageNumber = 1
      this.queryByPage()
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields()
      this.params.reportName = ''
      this.params.reportCode = ''
      this.params.pageNumber = 1
      this.queryByPage()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.queryByPage()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.queryByPage()
    },
    // 分享
    share(val) {
      this.reportCodeForShareDialog = val.reportCode
      this.reportNameForShareDialog = val.reportName
      this.visibleForShareDialog = true
    },
    openDesign(val) {
      const routeUrl = this.$router.resolve({
        path: '/bigscreen/designer',
        query: {
          reportCode: val.reportCode
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    viewDesign(val) {
      const routeUrl = this.$router.resolve({
        path: '/bigscreen/viewer',
        query: { reportCode: val.reportCode }
      })
      window.open(routeUrl.href, '_blank')
    },
    queryByPage() {
      if (this.params.pageNumber === 2) {
        this.list = (JSON.parse('[{"id":205,"createBy":"admin","createByView":null,"createTime":"2021-12-23 15:16:33","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 11:08:17","version":93,"reportName":"车联网平台数据概览","reportCode":"mb4","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":91,"accessKey":"259a0fd799b1b755997fc3a422fa0457"},{"id":204,"createBy":"admin","createByView":null,"createTime":"2021-12-23 15:13:57","updateBy":"guest","updateByView":null,"updateTime":"2022-06-20 09:23:27","version":235,"reportName":"大数据可视化展板通用模板","reportCode":"mb3","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":232,"accessKey":"9b4f881638dffd35289e0795cf3e2e02"}]'))
        return
      }
      if (this.params.pageNumber === 1) {
        this.list = (JSON.parse('[{"id":215,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:14:13","updateBy":"guest","updateByView":null,"updateTime":"2022-06-21 17:13:04","version":749,"reportName":"销售额大屏展示","reportCode":"mb19","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":745,"accessKey":"e8f35cabb615e596c0a460684f7a5014"},{"id":214,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:12:40","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 10:45:34","version":213,"reportName":"酒机运行状态","reportCode":"mb11","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":211,"accessKey":"156270e09151313f02b16b892db076f2"},{"id":213,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:11:48","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 10:49:29","version":214,"reportName":"大数据智慧能力-网络能力","reportCode":"mb10","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":212,"accessKey":"e1624aa7bc194eb58eb83acdb1022a23"},{"id":212,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:10:56","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 10:55:01","version":145,"reportName":"服装品牌销售模板","reportCode":"mb9","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":143,"accessKey":"b4a0b870293795977287f943501df097"},{"id":211,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:09:26","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 10:57:11","version":176,"reportName":"全国图书零售检测","reportCode":"mb8","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":174,"accessKey":"d158b78bc4e5f48eb16bdecbb4a55adc"},{"id":210,"createBy":"admin","createByView":null,"createTime":"2022-01-21 09:03:32","updateBy":"guest","updateByView":null,"updateTime":"2022-06-21 17:04:15","version":163,"reportName":"舆情分析","reportCode":"mb7","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":161,"accessKey":"a3020a8e220ec0c3602690ee5a484a9b"},{"id":207,"createBy":"admin","createByView":null,"createTime":"2021-12-23 15:24:00","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 11:00:59","version":140,"reportName":"智慧社区内网对比平台","reportCode":"mb6","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":"","enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":136,"accessKey":"a7d8c8e61fdc964a056448c57b50220a"},{"id":206,"createBy":"admin","createByView":null,"createTime":"2021-12-23 15:20:55","updateBy":"guest","updateByView":null,"updateTime":"2022-06-19 11:04:51","version":185,"reportName":"设备环境检测平台","reportCode":"mb5","setCodes":null,"reportGroup":"default","reportDesc":null,"setParam":null,"jsonStr":null,"reportType":"report_screen","total":0,"reportImage":null,"enableFlag":1,"deleteFlag":0,"reportAuthor":"心瘾丶 @yi_shan_liu","downloadCount":183,"accessKey":"1c959d37e59315f05f719d46974ba4bc"}]'))
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main-layout {
  padding: 20px;
  position: relative;
  height: auto;
  background: #fff;
  header {
    font-size: 24px;
    text-align: center;
    line-height: 80px;
  }
  .bg {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    border: 12px solid white;
  }

  .bg .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(6px);
    z-index: 2;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    color: #fff;
    left: 0;
    top: 0;
    z-index: 3;
  }
  footer {
    width: 100%;
    font-size: 14px;
    padding: 16px;
    line-height: 30px;
    position: absolute;
    z-index: 3;
    bottom: 0;
    .operation {
      float: right;
      .view,
      .edit {
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
